<template>
  <div>
    <ul
      class="mui-table-view mui-table-view-striped mui-table-view-condensed"
      style="height: 600px; overflow-y: scroll"
    >
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :auto-fill="false"
      >
        <li class="mui-table-view-cell" v-for="n in list" :key="n.newsId">  
          <router-link :to="'/produces/productsee/'+n.newsId">    
            <div class="mui-table">
              <div class="mui-table-cell mui-col-xs-10">
                <h4 class="mui-ellipsis">{{ n.newsTitle }}</h4>
                <p class="mui-h6 mui-ellipsis">
                  时间：<span>{{ n.newsDate | dateFmt("YYYY-MM-DD") }}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>点击：{{n.readNum}}次</span>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>发布人：{{admin.a_name}}</span>
                </p>
              </div>
            </div>
          </router-link>
           <div class="content" >
              <span style="margin-left:22px">{{n.newsContent}}</span>
            </div>
            <div>
              {{n.content}}
            </div>
           
        </li>
      </mt-loadmore>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import moment from "moment";
export default {
  filters: {
    dateFmt: function (str) {
      return moment(str).format("YYYY-MM-DD ");
    },
  },
  data() {
    return {
      list: [],
      current: 1, //用来保存当前的页码，默认是第一页
      totalPage: 0,
      allLoaded: false, //是否数据加载完毕，如果完毕则是true
      admin:{}
    };
  },
  methods: {
    //分页显示公告
    getNews() {
      this.$ajax({
        url: "before/news/" + this.current,
        method: "get",
      }).then(resp => {
        if (this.current == 1) {
          this.list = resp.data.message; //每次得到的都是一页的数据
        } else {
          this.list.push(...resp.data.message);
        }
        this.totalPage = resp.data.totalPage;
        this.getadmin(resp.data.message[0].n_a_id)    
      });   
    },
    getadmin(id){
      this.$ajax({
        url: "before/admin/" + id,
        method: "get",
      }).then(resp => {
        this.admin=resp.data.message[0]
      
      });
    },
    loadTop() {
      //重新加载第一页的数据就是刷新
      Toast("正在拼命刷新数据。。。。");
      this.current = 1;
      this.getNews();
      this.$refs.loadmore.onTopLoaded(); //手动重新刷新
    },
    //上拉加载释放的时候调用的方法
    loadBottom() {
      Toast("正在拼命加载数据。。。。");
      this.current = this.current + 1;
      if (this.current > this.totalPage) {
        this.allLoaded = true;
        return Toast("亲，总要有个结尾把。。。。。");
      }
      this.getNews();
    },
  },

  created() {
    //初始化调用
    this.getNews();
  },
};
</script>
<style scoped>
.ding {
  left: 0%;
  top: 15%;
  position: relative;
}
.kan {
  border: 1px solid #000;
  width: 150px;
  height: 40px;
  background-color: cyan;
}
.content{
  border: 1px solid whitesmoke;
  height: 100%;
  width: 300px;
}
</style>
